{% extends 'news/base.html' %}
{# 1.重写title #}
{% block titleBlock %}
    <title>首页-新经资讯</title>
{% endblock %}

{# 2.script部分 #}
{% block scriptBlock %}
    <script type="text/javascript" src="../../static/news/js/index.js"></script>
{% endblock %}

{# 3.分类部分 #}
{% block headerBlock %}
    <ul class="menu fl">
        {#遍历分类数据 #}
        {% for category in data.category_list %}
            <li class= "{% if loop.index0 == 0 %}active{% endif %}"data-cid={{ category.id }}><a href="javascript:;">{{ category.name }}</a></li>
        {% endfor %}
    </ul>
{% endblock %}

{# 4.新闻列表部分 #}
{% block contentBlock %}
    <ul class="list_con fl">
        <span style="color: red">正在加载数据,你急你马呢......</span>
    </ul>
{% endblock %}

{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>首页-新经资讯</title>#}
{#    <link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css">#}
{#    <link rel="stylesheet" type="text/css" href="../../static/news/css/main.css">#}
{#    <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script>#}
{#    <script type="text/javascript" src="../../static/news/js/main.js"></script>#}
{#    <script type="text/javascript" src="../../static/news/js/index.js"></script>#}
{#</head>#}
{#<body>#}
{#    <div class="header_con">#}
{#        <div class="header">#}
{#            <a href="#" class="logo fl"><img src="../../static/news/images/logo.png" alt="logo"></a>#}
{#            <ul class="menu fl">#}
                    {# 遍历分类数据 #}
{#                    {% for category in data.category_list %}#}
{#                        <li class= "{% if loop.index0 == 0 %}active{% endif %}"data-cid={{ category.id }}><a href="javascript:;">{{ category.name }}</a></li>#}
{#                    {% endfor %}#}
{##}
{##}
                 {#
{#                <li class="active" data-cid="1"><a href="javascript:;">最新</a></li>#}
{#                <li data-cid="2"><a href="javascript:;">股市</a></li>#}
{#                <li data-cid="3"><a href="javascript:;">债市</a></li>#}
{#                <li data-cid="4"><a href="javascript:;">商品</a></li>#}
{#                <li data-cid="5"><a href="javascript:;">外汇</a></li>#}
{#                <li data-cid="6"><a href="javascript:;">公司</a></li>#}
{#            </ul>#}
{##}
            {# 判断用户 是否登录    #}
{#            {% if data.user_info %}#}
{#                <!-- 用户登录后显示下面，隐藏上面 -->#}
{#                <div class="user_login fr">#}
{#                    <img src="../../static/news/images/person01.png" class="lgin_pic">#}
{#                    <a href="#">{{ data.user_info.nick_name }}</a>#}
{#                    <a href="#" onclick="logout()">退出</a>#}
{#                </div>#}
{#            {% else %}#}
{#                <div class="user_btns fr">#}
{#                    <a href="javascript:;" class="login_btn">登录</a> / <a href="javascript:;" class="register_btn">注册</a>#}
{#                </div>#}
{#            {% endif %}#}
{##}
{##}
{#        </div>#}
{#    </div>#}
{##}
{#    <div class="conter_con">#}
{#        <ul class="list_con fl">#}
{#            <li>#}
{#                <a href="#" class="news_pic fl"><img src="../../static/news/images/news_pic.jpg"></a>#}
{#                <a href="#" class="news_title fl">日本史上最大IPO之一要来了：软银计划将手机业务分拆上市软银计划将手机业务分拆上市</a>#}
{#                <a href="#" class="news_detail fl">据日经新闻网，软银计划让旗下核心业务移动手机部门SoftBank Corp.分拆上市，或募资2万亿日元(约180亿美元)。随着软银逐步向投资公司转型，此举旨在给手机业务部门更多自主权。</a>#}
{#                <div class="author_info fl">#}
{#                    <div class="author fl">#}
{#                        <img src="../../static/news/images/person.png" alt="author">#}
{#                        <a href="#">乐鸣</a>#}
{#                    </div>#}
{#                    <div class="time fl">2017-01-01 00:00:00</div>#}
{#                </div>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#" class="news_pic fl"><img src="../../static/news/images/news_pic.jpg"></a>#}
{#                <a href="#" class="news_title fl">日本史上最大IPO之一要来了：软银计划将手机业务分拆上市</a>#}
{#                <a href="#" class="news_detail fl">据日经新闻网，软银计划让旗下核心业务移动手机部门SoftBank Corp.分拆上市，或募资2万亿日元(约180亿美元)。随着软银逐步向投资公司转型，此举旨在给手机业务部门更多自主权。</a>#}
{#                <div class="author_info fl">#}
{#                    <div class="source fl">#}
{#                        来源：广州日报#}
{#                    </div>#}
{#                    <div class="time fl">2017-01-01 00:00:00</div>#}
{#                </div>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#" class="news_pic fl"><img src="../../static/news/images/news_pic.jpg"></a>#}
{#                <a href="#" class="news_title fl">日本史上最大IPO之一要来了：软银计划将手机业务分拆上市</a>#}
{#                <a href="#" class="news_detail fl">据日经新闻网，软银计划让旗下核心业务移动手机部门SoftBank Corp.分拆上市，或募资2万亿日元(约180亿美元)。随着软银逐步向投资公司转型，此举旨在给手机业务部门更多自主权。</a>#}
{#                <div class="author_info fl">#}
{#                    <div class="author fl">#}
{#                        <img src="../../static/news/images/person.png" alt="author">#}
{#                        <a href="#">乐鸣</a>#}
{#                    </div>#}
{#                    <div class="time fl">2017-01-01 00:00:00</div>#}
{#                </div>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#" class="news_pic fl"><img src="../../static/news/images/news_pic.jpg"></a>#}
{#                <a href="#" class="news_title fl">日本史上最大IPO之一要来了：软银计划将手机业务分拆上市</a>#}
{#                <a href="#" class="news_detail fl">据日经新闻网，软银计划让旗下核心业务移动手机部门SoftBank Corp.分拆上市，或募资2万亿日元(约180亿美元)。随着软银逐步向投资公司转型，此举旨在给手机业务部门更多自主权。</a>#}
{#                <div class="author_info fl">#}
{#                    <div class="source fl">#}
{#                        来源：广州日报#}
{#                    </div>#}
{#                    <div class="time fl">2017-01-01 00:00:00</div>#}
{#                </div>#}
{#            </li>#}
{#        </ul>#}
{#        <div class="rank_con fr">#}
{#            <div class="rank_title">#}
{#                <h3>点击排行</h3>#}
{#            </div>#}
{#            <ul class="rank_list">#}
                {# 遍历热门新闻 #}
{#                {% for news in data.news_list %}#}
                    {# 根据遍历的索引，设置标签样式 #}
                    {# 第一种方式 #}
                    {#
{#                    {% if loop.index == 1 %}#}
{#                        <li><span class="first">{{ loop.index }}</span><a href="#">{{ news.title }}</a></li>#}
{#                    {% elif loop.index == 2 %}#}
{#                        <li><span class="second">{{ loop.index }}</span><a href="#">{{ news.title }}</a></li>#}
{#                    {% elif loop.index == 3 %}#}
{#                        <li><span class="third">{{ loop.index }}</span><a href="#">{{ news.title }}</a></li>#}
{#                    {% else %}#}
{#                        <li><span class=" ">{{ loop.index }}</span><a href="#">{{ news.title }}</a></li>#}
{##}
{#                    {% endif %}#}
{#                    #}
                    {# 第二种方式 #}
{#                    <li><span class="{{ loop.index | my_filter }}">{{ loop.index }}</span><a href="#">{{ news.title }}</a></li>#}
{##}
{##}
{##}
{#                {% endfor %}#}
{##}
{##}
{#                <li><span class="first">1</span><a href="#">势如破竹！人民币再度连闯四道关口 在岸、离岸双双升破6.42</a></li>#}
{#                <li><span class="second">2</span><a href="#">凛冬已至，还有多少银行人在假装干银行</a></li>#}
{#                <li><span class="third">3</span><a href="#">人民日报：部分城市楼市放松限制引关注，楼市调控不会“拉抽屉”</a></li>#}
{#                <li><span>4</span><a href="#">势如破竹！人民币再度连闯四道关口 在岸、离岸双双升破6.42</a></li>#}
{#                <li><span>5</span><a href="#">凛冬已至，还有多少银行人在假装干银行</a></li>#}
{#                <li><span>6</span><a href="#">人民日报：部分城市楼市放松限制引关注，楼市调控不会“拉抽屉”</a></li>#}
{#            </ul>#}
{#        </div>#}
{#    </div>#}
{#    <div class="footer">#}
{#        <div class="footer_links">#}
{#            <a href="">关于我们</a>#}
{#            <span>|</span>#}
{#            <a href="">联系我们</a>#}
{#            <span>|</span>#}
{#            <a href="">招聘人才</a>#}
{#            <span>|</span>#}
{#            <a href="">友情链接</a>#}
{#        </div>#}
{#        <p class="copyright">#}
{#            CopyRight © 2018 新经资讯信息技术有限公司 All Rights Reserved<br />#}
{#电话：010-****888    京ICP备*******8号#}
{#        </p>#}
{#    </div>#}
{##}
{#    <!-- 登录表单 -->#}
{#    <form class="login_form_con">#}
{#        <div class="login_form">#}
{#            <div class="login_title">#}
{#                <h3>登 录</h3>#}
{#                <a href="javascript:;" class="shutoff"></a>#}
{#            </div>#}
{#            <div class="form_group">#}
{#                <input id="mobile" type="text" name="mobile" autocomplete="off">#}
{#                <div class="input_tip">手机号</div>#}
{#                <div id="login-mobile-err" class="error_tip">手机号不能为空</div>#}
{#            </div>#}
{#            <div class="form_group">#}
{#                <input id="password" type="password" name="password">#}
{#                <div class="input_tip">密码(不少于6位)</div>#}
{#                <div id="login-password-err" class="error_tip">密码不能为空</div>#}
{#            </div>#}
{#            <input type="submit" name="" value="登 录" class="input_sub">#}
{#            <div class="down_link">还没有账号？<a href="javascript:;" class="to_register">立即注册</a></div>#}
{#        </div>#}
{#        <div class="mask"></div>#}
{#    </form>#}
{##}
{#    <!-- 注册表单 -->#}
{#    <form class="register_form_con">#}
{#        <div class="register_form">#}
{#            <div class="register_title">#}
{#                <h3>注 册</h3>#}
{#                <a href="javascript:;" class="shutoff"></a>#}
{#            </div>#}
{#            <div class="form_group">#}
{#                <input type="text" name="mobile" autocomplete="off" id="register_mobile" class="phone_input">#}
{#                <div class="input_tip">手机号</div>#}
{#                <div id="register-mobile-err" class="error_tip">手机号不能为空</div>#}
{#            </div>#}
{#            <div class="form_group">#}
{#                <input type="text" name="code_pwd" id="imagecode" class="code_pwd">#}
{#                <div class="input_tip">图形验证码</div>#}
{#                <img src="../../static/news/images/pic_code.png" class="get_pic_code" onclick="generateImageCode()">#}
{#                <div id="register-image-code-err" class="error_tip">图形码不能为空</div>#}
{#            </div>#}
{#            <div class="form_group">#}
{#                <input type="text" name="smscode" id="smscode" class="code_pwd">#}
{#                <div class="input_tip">手机验证码</div>#}
{#                <a href="javascript:;" class="get_code" onclick="sendSMSCode()">点击获取验证码</a>#}
{#                <div id="register-sms-code-err" class="error_tip">验证码不能为空</div>#}
{#            </div>#}
{#            <div class="form_group">#}
{#                <input type="password" name="password" id="register_password" class="pass_input">#}
{#                <div class="input_tip">密码(不少于6位)</div>#}
{#                <div id="register-password-err" class="error_tip">密码不能为空</div>#}
{#            </div>#}
{#            <div  class="form_group2 clearfix">#}
{#                <input type="checkbox" class="agree_input" checked>#}
{#                <p>同意使用条款，并已阅读"跟帖评论自律管理承诺书"</p>#}
{#                <div class="error_tip">请勾选</div>#}
{#            </div>#}
{#            <input type="submit" name="" value="注 册" class="input_sub">#}
{#            <div class="down_link">已有账号？<a href="javascript:;" class="to_login">立即登录</a></div>#}
{#        </div>#}
{#        <div class="mask"></div>#}
{#    </form>#}
{#</body>#}
{#</html>#}